<template>
  <div class="wodedetail">
    <!-- 返回、搜索部分 -->
    <div class="header">
      <backTitle></backTitle>
      <div class="van-ellipsis">{{title}}</div>
      <span class="dian" @click="clickname">
        <van-icon name="ellipsis" />
      </span>
    </div>

    <!-- 背景图  -->
    <div class="banner">
      <img :src="bgcimg" alt />
    </div>

    <!-- 歌单列表 -->
    <div class="songlist">
      <span class="playall" @click="playall">
        <i class="iconfont icon-icon-test1">&nbsp;&nbsp;播放全部</i>
      </span>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <template v-for="(item, index) in bufensonglist">
          <div class="song" :data-id="item.id">
            <span class="num">{{index+1}}、</span>
            <div class="van-ellipsis" @click="change(item.id,index)">
              <span class="songname">{{item.name}}</span>
              <span class="singername">&nbsp;-{{item.ar[0].name}}</span>
            </div>
            <span class="dian" @click="popsong(item.id,item.name,item.ar[0].name)">
              <van-icon name="ellipsis" />
            </span>
          </div>

          <!-- 歌单名字弹出层 -->
          <van-popup v-model="nameshow" round>
            <van-field v-model="namemsg" center clearable placeholder="请输入歌单名" maxlength="12">
              <van-button slot="button" size="small" type="primary" @click="updatename()">保存</van-button>
            </van-field>
          </van-popup>

          <!-- 歌曲详情弹出层 -->
          <van-popup v-model="songdetailshow" class="songdetail" position="bottom">
            <div class="detail">
              <span class="singerimg">
                <img :src="singerimg" />
              </span>
              <div class="name">
                <div class="van-ellipsis songname">{{name}}</div>
                <div class="van-ellipsis singername">{{singername}}</div>
              </div>
            </div>
            <!-- 删除 -->
            <div class="delete" @click="confirmdelete(songid)">
              <van-icon name="delete" />
              <span>删除</span>
            </div>
            <!-- 歌手 -->
            <router-link
              :to="{path:'/geshou/singerdetail/id',
              query:{id:singerid,title:singername}}"
            >
              <div class="singer">
                <van-icon name="manager-o" />
                <span>歌手：{{singername}}</span>
              </div>
            </router-link>
            <!-- 评论 -->
            <router-link :to="{path:'/pinglun/pinglun/id',query:{id:songid}}">
              <div class="comment">
                <van-icon name="chat-o" />
                <span>评论</span>
              </div>
            </router-link>
          </van-popup>
        </template>
      </van-list>
    </div>
  </div>
</template>

<script>
import backTitle from "../../components/back";
import send from "../../navshow";

export default {
  data() {
    return {
      songlist: [], //歌曲列表
      bufensonglist: [], //部分列表
      title: "歌单", //标题
      bgcimg: "", //背景图片
      nameshow: false, //歌单名弹出层
      namemsg: "", //输入框内容
      songdetailshow: false, //歌曲详情弹出层
      songid: "", //歌曲id
      singerid: "", //歌手id
      singerimg: "", //歌手头像
      name: "", //歌名
      singername: "", //歌手名
      loading: false, //加载状态
      finished: false //是否加载完成
    };
  },
  created() {
    // 隐藏导航栏
    send.$emit("tab-show", false);

    // 显示播放器
    this.$store.commit("showplayer", true);

    var date = new Date();

    // 获取歌单详情
    var url = "http://localhost:3000/playlist/detail?id=" +
      this.$route.query.id +
      "&timestamp=" +
      date.getTime();
    this.axios.get(url).then(res => {
      this.songlist = res.data.playlist.tracks;
      this.bufensonglist = this.songlist.slice(0, 10);
      this.$store.commit("playsonglist", this.songlist); //将歌单里的歌曲上传到仓库
      this.title = res.data.playlist.name;
      this.bgcimg = res.data.playlist.coverImgUrl;
    });
  },
  mounted() {
    // 当滚动条滚动时改变头部的背景颜色
    $(".wodedetail").on("touchmove", function(e) {
      var top = $(window).scrollTop();
      if (top > 200) {
        $(".header").css("background-color", "black");
      } else {
        $(".header").css("background-color", "");
      }
    });
  },
  methods: {
    //获取id
    change(id, index) {
      this.$store.commit("changeid", id); //获取播放歌曲id
      this.$store.commit("changeindex", index);
      this.$store.commit("showAudio", false); // 点击显示播放状态
    },

    //播放全部
    playall() {
      var id = this.$store.state.songlist[0].id; //获取列表第一首的id
      this.$store.commit("changeid", id); //获取播放歌曲id
      this.$store.commit("changeindex", 0);
      this.$store.commit("showAudio", false); // 点击显示播放状态
      this.$toast("开始播放全部歌曲");
    },

    // 歌单名弹出框
    clickname() {
      console.log('11');
      this.nameshow = true;
    },

    // 更新歌单名
    updatename() {
      var date = new Date();
      this.nameshow = false;
      let url =
        "http://localhost:3000/playlist/name/update?id=" +
        this.$route.query.id +
        "&name=" +
        this.namemsg +
        "&timestamp=" +
        date.getTime();

      if (this.namemsg == "") {
        this.$toast("请输入歌单名");
      } else {
        this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.title=this.namemsg;
            this.$toast("修改成功");
          }
        });
      }
    },

    // 歌曲详情弹出层
    popsong(id, name, singername) {
      this.songid = id;
      this.songdetailshow = true;

      let url = "http://localhost:3000/song/detail?ids=" + id;
      this.axios.get(url).then(res => {
        this.singerid = res.data.songs[0].ar[0].id;
        this.singerimg = res.data.songs[0].al.picUrl; //歌手头像
        this.name = name;
        this.singername = singername;
      });
    },

    // 删除歌曲
    confirmdelete(id) {
      this.$dialog
        .confirm({
          message: "确定将所选音乐从列表中删除",
          confirmButtonText: "确定", //改变确认按钮上显示的文字
          cancelButtonText: "取消" //改变取消按钮上显示的文字
        })
        .then(() => {
          let url =
            "http://localhost:3000/playlist/tracks?op=del&pid=" +
            this.$route.query.id +
            "&tracks=" +
            id;
          this.axios({
            url,
            withCredentials: true //关键
          }).then(res => {
            if (res.status == 200) {
              this.songdetailshow = false;
              this.$toast("已删除");

              // 删除元素
              var lists = $(".song");
              for (let index = 0; index < lists.length; index++) {
                if (lists[index].dataset.id == this.songid) {
                  lists[index].remove();
                }
              }
            }
          });
        })
        .catch(() => {
          this.songdetailshow = false;
        });
    },

    // 加载
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 8; i++) {
          if (this.bufensonglist.length + 8 <= this.songlist.length) {
            this.bufensonglist.push(
              this.songlist[this.bufensonglist.length + 1]
            );
          } else {
            this.bufensonglist = this.songlist;
          }
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.bufensonglist.length == this.songlist.length) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  components: {
    // 注册一个局部组件
    backTitle
  },
  computed: {
    // 监听时间戳的变化
    watchtimestamp() {
      return this.$store.state.timestamp;
    },

    // 监听音乐id的变化
    watchid() {
      return this.$store.state.id;
    }
  },
  watch: {
    // 监听时间戳变化
    watchtimestamp: function(val) {
      console.log(val);
    },
    // 监听id的变化
    watchid: function(id) {}
  }
};
</script>

<style>
/* 返回、搜索部分 */
.wodedetail .header {
  display: flex;
  width: 100vw;
  height: 60px;
  align-items: center;
  color: white;
  position: fixed;
  top: 0;
  z-index: 666;
}

.van-ellipsis {
  text-align: left;
  width: 60vw;
  margin-left: 10px;
}

.header span {
  font-size: 18px;
  color: #dbdbdb;
}

.header span i {
  color: #dbdbdb;
  font-size: 24px;
}

/* 背景图 */
.wodedetail .banner {
  width: 100%;
  height: 260px;
}

.banner img {
  width: 100%;
  height: 100%;
}

/* 歌单列表 */
.wodedetail .songlist {
  width: 100vw;
  background-color: white;
  position: relative;
  top: -45px;
  border-radius: 30px 30px 0 0;
  margin-bottom: 20px;
}

.icon-icon-test1 {
  margin-left: 20px;
  font-size: 22px;
}

.song {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  position: relative;
}

.song .van-ellipsis {
  text-align: left;
}

.song span {
  font-size: 16px;
}

.song .num {
  margin-left: 25px;
}

.song .songname {
  color: #333333;
  font-weight: normal;
}

.song .singername {
  font-size: 12px;
  color: gray;
}

.dian {
  transform: rotate(90deg);
  position: absolute;
  right: 30px;
}

/* 歌单名弹出层 */
.wodedetail .van-cell {
  width: 75vw;
}

/* 歌曲详情弹出层 */
.wodedetail .songdetail {
  width: 100vw;
  height: 37vh;
  border-radius: 30px 30px 0 0;
}

.wodedetail .detail {
  width: 90vw;
  height: 80px;
  margin: 10px auto 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wodedetail .detail .singerimg {
  width: 20vw;
  height: 70px;
}

.wodedetail .detail img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.wodedetail .detail .name {
  width: 60vw;
  height: 40px;
}

.wodedetail .detail .songname {
  width: 65vw;
}

.wodedetail .detail .singername {
  width: 65vw;
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: gray;
}

/* 功能 */
.wodedetail .delete,
.wodedetail .singer,
.wodedetail .comment {
  width: 90vw;
  height: 7vh;
  margin: 0 auto 0;
  border-bottom: 1px solid #dbdbdd;
  display: flex;
  align-items: center;
}

.wodedetail .delete i,
.singer i,
.comment i {
  font-size: 18px;
  margin-left: 10px;
  color: #333333;
}

.wodedetail .delete span,
.wodedetail .singer span,
.comment span {
  width: 80vw;
  margin-left: 5vw;
  font-size: 16px;
}
</style>